<template>
	<view>

		<view class="vmb-my-header">
			<view class="iconfont icon-shezhi"></view>

			<view class="photo-top">
				<u--image class="imageClass" shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg"
					width="120rpx" height="120rpx"></u--image>
				<view class="isBottom">
					<u--text text="赵岩" color='#fff' size='17'></u--text>
				</view>
				<view class="">
					<u--text text="全心全意为您服务" suffixIcon="edit-pen" size='14'
						:iconStyle="{'font-size': '14px','color':'#fff'}" color='#fff'></u--text>
				</view>


			</view>


		</view>
		<view class="vmb-my-nav">


			<view class="space-layout"></view>

			<view class="space-layout"></view>


		</view>

		<view class="viewClass">
			<u-cell-group>
				<u-cell :border='false' icon="star" title="切换项目" :isLink="true" :value="changeItem"
					@click='clickItem()'></u-cell>
				<u-cell icon="star" title="切换身份" :isLink="true" :value="valueCard" @click='clickMethod()'></u-cell>
			</u-cell-group>
			<u-gap height="15" bg-color="#ededed"></u-gap>
			<u-cell-group>
				<u-cell :border='false' icon="star" title="在线客服" :isLink="true" @click='clickMyDetail()'></u-cell>
				<u-cell :border='false' icon="star" title="建议反馈" :isLink="true"></u-cell>
				<u-cell icon="star" title="关于" :isLink="true"></u-cell>
			</u-cell-group>
		</view>


		<u-modal :show="show" :title="title" :content='content' :showConfirmButton='false' closeOnClickOverlay
			@close="() => show = false">
			<view class="u-popup-slot">
				<view>
					<u-button @click="goChoice(1)" :class="{ active: isActive}" type="default" size="small" text="销售经理">
					</u-button>
				</view>
				<view>
					<u-button @click="goChoice(2)" :class="{ active: !isActive}" type="default" size="small"
						text="置业顾问"></u-button>
				</view>

			</view>

		</u-modal>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: true,
				list: ['integral', 'kefu-ermai', 'coupon', 'gift', ],
				pic: 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif',
				show: false,
				title: '请选择要切换的身份',
				content: 'uView的目标是成为uni-app生态最优秀的UI框架',
				changeItem: '',
				valueCard: '',

			}
		},

		onLoad() {
			// this.$api.getInfo().then(res => {
			// 	console.log(res)
			// })
			this.changeItem = uni.getStorageSync('changeItem')

			if (uni.getStorageSync('vuex_tabbar') == 1) {
				this.valueCard = '职业顾问'
			} else {
				this.valueCard = '销售经理'
			}
		},
		onShow() {
		
		},
		methods: {
			goChoice(index) {
				if (index == 1) {
					this.isActive = true
					this.valueCard = '销售经理'
					this.$store.commit('choiceOne')
				} else {
					this.$store.commit('choiceTwo')
					this.isActive = false
					this.valueCard = '职业顾问'
				}
				this.show = false
			},
			clickItem() {
				uni.navigateTo({
					url: '/pages/my/choiceItem?id=1'
				});
			},
			clickMyDetail() {
				uni.navigateTo({
					url: '/pages/my/card'
				});
			},
			clickMethod() {
				this.show = true
				console.log(this.$store.state.vuex_tabbar)

				// if (this.$store.state.vuex_tabbar == 1) {
				// 	this.$store.commit('choiceOne')

				// } else {
				// 	this.$store.commit('choiceTwo')
				// }


			},
			doSomeThing() {
				this.$dy_tool.toLogin(this.vuex_token)
				console.log('do something need login, you should toLogin before.')
			}
		}
	}
</script>


<style lang="scss" scoped>
	.u-popup-slot {
		width: 70%;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.active {
			color: #409eff;
			background: #ecf5ff;

		}

	}

	.viewClass {
		padding: 0rpx 30rpx;

		/deep/ .u-cell-group {
			background-color: #fff;
			border-radius: 10rpx;
		}
	}

	.vmb {
		&-my-header {
			box-sizing: border-box;
			width: 100%;
			height: 400rpx;
			background: rgb(60, 156, 255);
			background-size: 100% 100%;
			padding: 30rpx 30rpx;
			border-radius: 0 0 60rpx 60rpx;
			position: relative;

			.icon-shezhi {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
			}

			.photo-top {
				height: 260rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.isBottom {
					margin-top: 20rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		&-my-nav {
			// width: calc(100% - 60rpx);
			margin-left: auto;
			margin-right: auto;
			height: 150rpx;
			padding: 0 30rpx;
			margin-top: -80rpx;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.space-layout {
				background: #CED7E1;
				width: 48%;
				height: 150rpx;
				border-radius: 4px;
			}

		}
	}
</style>
